<template>
    <div class="container">
        <h3>新增设备</h3>

        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="140px" class="demo-ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="设备类型：">
						{{ruleForm.type}}
                    </el-form-item>
                    <el-form-item label="设备厂商：">
                        {{ruleForm.manufacturer}}
                    </el-form-item>
                    <el-form-item label="分组：">
                        {{ruleForm.group}}
                    </el-form-item>
                    <el-form-item label="设备序列号：" v-if="show1">
                        {{ruleForm.serial}}
                    </el-form-item>
                    <el-form-item label="RTSP端口：" v-if="show4">
                        {{ruleForm.rtsp}}
                    </el-form-item>
                    <el-form-item label="密码：" v-if="show4">
                        {{ruleForm.password}}
                    </el-form-item>
                    <el-form-item label="服务端口：" v-if="show3">
                        {{ruleForm.service}}
                    </el-form-item>
                    <!-- <el-form-item label="直播源地址(流畅)：" v-if="show5">
                        <el-input placeholder="请输入内容" v-model="ruleForm.rtspHd" style="width: 300px"> </el-input>
                    </el-form-item> -->
                    <el-form-item label="购买时间：">
                        {{ruleForm.purchaseTime}}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="设备名称：" v-if="show1">
                        {{ruleForm.name}}
                    </el-form-item>
                    <el-form-item label="设备型号：" v-if="show1">
                        {{ruleForm.model}}
                    </el-form-item>
                    <el-form-item label="用户名称：" v-if="show4">
                        {{ruleForm.username}}
                    </el-form-item>
                    <el-form-item label="HTTP端口：" v-if="show3">
                        {{ruleForm.http}}
                    </el-form-item>
                    <el-form-item label="IP/域名：" v-if="show4">
                        {ruleForm.ip}
                    </el-form-item>
                    <el-form-item label="通道号：" v-if="show3">
                        {{ruleForm.channel}}
                    </el-form-item>
                    <el-form-item label="直播源地址(高清)：" v-if="show5">
                        {{ruleForm.rtspHd}}
                    </el-form-item>
                    <el-form-item label="物联网号：" v-if="show2">
                        {{ruleForm.wulianNo}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { facility_save, facility_findById,facility_update } from '@/request/api';
import { regionData, CodeToText } from 'element-china-area-data';
export default {
    data() {
        return {
            show1: true,//设备型号，设备名称，设备序列号
            show2: true,//物联网号
            show3: true,//通道号，http端口，服务端口，
            show4: true,//ip/域名，用户名称，密码，RTSP端口
            show5: true,//直播源地址(高清)，直播源地址(流畅)，
            city: '',
            area: '',
            isShow: false,
            type: [{ name: '摄像头' }, { name: '气象传感' }, { name: '定位仪' }, { name: '打印设备' },{ name: '其他'}],
            manufacturer: [{ name: '海康威视' }, { name: '大华' }, { name: '萤石云' }, { name: '乐橙' }],
            labelPosition: 'right',
            allMessage: '',
            ruleForm: {
				manufacturer:''
			},
            rules: {
                type: [{ required: true, message: '不能为空', trigger: 'change' }],
                manufacturer: [{ required: true, message: '不能为空', trigger: 'change' }]
            }
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id == undefined) {
        } else {
            this.init();
        }
    },
    methods: {
        // 编辑获取数据
        init() {
            facility_findById(this.id).then((res) => {
                this.ruleForm = res.data;
				this.manufacturerchange(this.ruleForm.manufacturer)
                let e = res.data.type
                let ef = res.data.manufacturer
                if (e == '摄像头') this.manufacturer= [{ name: '海康威视' }, { name: '大华' }, { name: '萤石云' }, { name: '乐橙' }],this.show3 = true,this.show4 = true,this.show5 = true,this.show2 = true
                if (e == '气象传感') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = true
                if (e == '定位仪') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = true
                if (e == '其他') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = false
                if (ef == '海康威视') (this.show3 = true), (this.show4 = true), (this.show5 = false);
                if (ef == '大华') (this.show3 = false), (this.show4 = true), (this.show5 = false);
                if (ef == '萤石云') (this.show3 = false), (this.show4 = false), (this.show5 = true);
                if (ef == '乐橙') (this.show3 = false), (this.show4 = false), (this.show5 = true);
            });
        },
     
        // 返回
        backPage() {
            this.$router.go(-1);
        },
        // 判断必填项是否填了
    
     
        // 新增和编辑

        //根据设备厂商选择判定显示输入框
        manufacturerchange(e) {
            console.log(e)
            if (e == '海康威视') (this.show3 = true), (this.show4 = true), (this.show5 = false);
            if (e == '大华') (this.show3 = false), (this.show4 = true), (this.show5 = false);
            if (e == '萤石云') (this.show3 = false), (this.show4 = false), (this.show5 = true);
            if (e == '乐橙') (this.show3 = false), (this.show4 = false), (this.show5 = true);
        },

        equipmentTypechange(e){
			this.ruleForm.manufacturer = ""
            if (e == '摄像头') this.manufacturer= [{ name: '海康威视' }, { name: '大华' }, { name: '萤石云' }, { name: '乐橙' }],this.show3 = true,this.show4 = true,this.show5 = true,this.show2 = true
            if (e == '气象传感') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = true
            if (e == '定位仪') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = true
            if (e == '其他') this.manufacturer= [{ name: '原链科技' }, { name: '其他' }],this.show3 = false,this.show4 = false,this.show5 = false,this.show2 = false
        }
    }
};
</script>

<style scoped lang="less">
.demo-ruleForm {
    margin-top: 10px;
}

.demo-ruleForm .el-radio--small.is-bordered {
    width: 120px !important;
    margin-right: 10px !important;
}

.box {
    width: 85%;
    margin-bottom: 15px;
    dl {
        margin-bottom: 20px;
        overflow: hidden;
        dt {
            margin-bottom: 5px;
            font-size: 14px;
        }
        dd {
            font-weight: 500;
            font-size: 12px;
            float: left;
            width: 50%;
            line-height: 24px;
        }
    }
    dl:last-child {
        margin-bottom: 0;
    }
    .el-col-11 {
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p {
            color: #303133;
        }
        .record-tip-con {
            padding-top: 10px;
        }
    }
}
</style>